import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { queryDream } from '../../services/tools';

const Dream: React.FC = () => {
  const [keyword, setKeyword] = useState('');
  const [dreamData, setDreamData] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  
  const navigate = useNavigate();
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    // 表单验证
    if (!keyword) {
      setError('请输入梦境关键词');
      return;
    }
    
    try {
      setLoading(true);
      setError('');
      
      // 调用周公解梦API
      const response = await queryDream(keyword);
      
      if (response.code === 200) {
        setDreamData(response.data);
      } else {
        setError(response.message || '解梦失败');
      }
    } catch (err: any) {
      setError(err.message || '解梦失败，请稍后再试');
    } finally {
      setLoading(false);
    }
  };
  
  // 模拟解梦数据
  const mockDreamData = {
    keyword: keyword,
    meaning: '梦见' + keyword + '，通常象征着内心的渴望或担忧。从心理学角度来看，这可能反映了您近期的情绪变化或潜意识中的某种期待。',
    prediction: '从预示角度看，这个梦境可能预示着近期会有一些变化或机遇出现，建议保持积极心态面对。',
    suggestions: '建议您保持心态平和，不必过度解读梦境；适当放松心情，保持良好的睡眠习惯有助于减少此类梦境。'
  };
  
  const displayData = dreamData || (keyword && !loading ? mockDreamData : null);
  
  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
        <div className="p-6">
          <h2 className="text-2xl font-bold text-gray-900 text-center mb-6">周公解梦</h2>
          
          {/* 搜索表单 */}
          <form onSubmit={handleSubmit} className="mb-8">
            <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
              <input
                type="text"
                className="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                placeholder="请输入梦境关键词，如：蛇、飞、考试、掉牙等"
                required
              />
              <button
                type="submit"
                disabled={loading}
                className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${loading ? 'opacity-70 cursor-not-allowed' : ''}`}
              >
                {loading ? '解梦中...' : '解梦'}
              </button>
            </div>
            
            {error && (
              <div className="text-red-500 text-sm text-center mt-2">
                {error}
              </div>
            )}
          </form>
          
          {/* 解梦结果 */}
          {displayData && (
            <div className="bg-purple-50 p-6 rounded-lg">
              <h3 className="text-xl font-medium text-purple-900 mb-4">梦见"{displayData.keyword}"的解析</h3>
              
              <div className="space-y-4">
                <div>
                  <h4 className="text-md font-medium text-purple-800">梦境含义</h4>
                  <p className="text-gray-700">{displayData.meaning}</p>
                </div>
                
                <div>
                  <h4 className="text-md font-medium text-purple-800">吉凶预示</h4>
                  <p className="text-gray-700">{displayData.prediction}</p>
                </div>
                
                <div>
                  <h4 className="text-md font-medium text-purple-800">建议</h4>
                  <p className="text-gray-700">{displayData.suggestions}</p>
                </div>
              </div>
              
              <div className="mt-4 text-sm text-gray-500">
                <p>注：解梦结果仅供参考，请理性看待</p>
              </div>
            </div>
          )}
          
          {/* 操作按钮 */}
          <div className="mt-8 flex justify-center">
            <button
              onClick={() => navigate('/tools')}
              className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              返回工具列表
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dream;
